<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            margin: 6px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- js表达式 -->
        <!-- <h1 :style="{opacity: opacity}">欢迎学习Vue</h1> -->
        <!-- 简写成 -->
        <h1 :style="{opacity}">欢迎学习Vue</h1>
        <!-- 不推荐使用这个方式去调用函数 -->
        <!-- {{changeOpacity()}} -->
    </div>

    
    
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:'zzz1',
                opacity:1
            },
            computed:{
            },
            methods:{
                // changeOpacity(){
                //     setInterval(() => {
                //         vm.opacity -= 0.01
                //         if(vm.opacity<=0){
                //             vm.opacity = 1
                //         }
                //     }, 16);
                // }
            },
            watch:{
            },
            filters:{
            },
            directives:{
            },
            //生命周期函数回调函数
            //Vue把初始的真实dom放入元素中后（挂载完毕）调用mounted函数中的挂载内容，只调用1次
            mounted(){
                setInterval(() => {
                    if(vm.opacity<=0){
                        this.direction = 1
                    }else if(vm.opacity>=0.98){
                        this.direction = 0
                    }
                    if(this.direction === 1){
                        vm.opacity += 0.01
                    }else if(this.direction === 0){
                        vm.opacity -= 0.01
                    }
                }, 16);
            },
        })
        //通过外部的定时器实现(不推荐)
        // setInterval(() => {
        //     vm.opacity -= 0.01
        //     if(vm.opacity<=0){
        //         vm.opacity = 1
        //     }
        // }, 16);
    </script>    
</body>
</html>